import { memo, useMemo } from 'react';
import { Cell } from './Cell';
import { ColFixeds, IColumn } from './types';

interface IProps {
  /** 列配置 */
  columns: IColumn<any>[];
  /** 固定列配置 */
  colFixed: ColFixeds;
  /** 数据 */
  data: any;
}

/**
 * 表格Footer
 */
const Footer = memo((props: IProps) => {
  return (
    <tr>
      <RowContent {...props} />
    </tr>
  );
});

const RowContent = memo((props: IProps) => {
  const { columns, colFixed, data } = props;
  const _columns = useMemo(() => {
    let c = columns.map((item: any) => {
      if (item.children) {
        return item.children.map((p: any) => {
          return p
        })
      } else {
        return item
      }
    }).flat()
    return c
  }, [columns])
  return (
    <>
      {_columns.map((col, idx) => {
        const footerValue = col.footerValue
          ? typeof col.footerValue === 'function'
            ? col.footerValue(data) : col.footerValue
          : '-';
        return <Cell
          key={col.key}
          index={0}
          column={col}
          onCellChange={() => { } }
          onCellClick={() => { } }
          value={footerValue}
          data={data}
          colFixed={colFixed}
          footerStyle={{ fontWeight: 800, backgroundColor: '#f2f3f5', height: 25, lineHeight: '25px' }} 
          dataValue={undefined}        />;
      })}
    </>
  );
});

export { Footer };
